<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>知音动听</title>
		<link rel="stylesheet" href="./css/style.css" />
		<link rel="stylesheet" href="./iconfont.css" />
		<link rel="stylesheet" href="./iconfont2.css" />
		<link rel="shortcut icon" href="favicon.ico" />
	</head>
	<body>
	<div class="bg">
		<img src="imgs/蓝色水彩纯色背景电商淘宝背景Ｈ5.jpg" />
	</div>
		<div class="w" v-cloak>

			<!-- ------------------------顶部内容---------------------------------------- -->
			<header :style="themein">
				<div class="title">知音动听</div>
				<div class="search">
					<input type="search" value="搜索" @keyup.enter="search" v-model="searchWorld" :style="themeinSearch">
					<span class="iconfont icon-sousuo"></span>
				</div>
				<div class="iconfont icon-biaoqianA01_pifu-46" title="更换主题" @click="othemeShow()"></div>
				<!-- 设置主题 -->
				<div class="theme" v-show="themeShow">
					<ul>
						<li :style="theme1" @click="catTheme1()"></li>
						<li :style="theme2" @click="catTheme2()"></li>
						<li :style="theme3" @click="catTheme3()"></li>
					</ul>
				</div>
			</header>
			<!-- ------------------------顶部内容 结束---------------------------------------- -->



			<!-- ------------------------左侧的音乐---------------------------------------- -->
			<div class="left">
				<div id="leftTitle">发现音乐</div>
				<ul>
					<li v-for="(item,index) in musicArr">
						<!-- 通过生成的数组，生成多个li -->
						<span class="iconfont icon-bofang1" @click="geturl(item.id)"></span>
						<!-- 通过绑定的事件，拿到id，然后调用接口，把id传递给接口  获取到歌曲url地址-->
						{{item.name}}
						<!-- 	歌曲的名字 -->
						<!-- <span class="iconfont icon-bofang"></span> -->
					</li>
				</ul>
			</div>
			<!-- ------------------------左侧的音乐 结束---------------------------------------- -->


			<!-- ------------------------中间旋转部分---------------------------------------- -->
			<div class="mid">
				<div>
					<div class="circular">
						<img :src="musicImg" / id="imgRotate">
					</div>
					<div>
						<img src="imgs/jxb.png" id="jxb"/><!-- 磁带上方的机械臂 -->
					</div>
				</div>
			</div>
			<!-- ------------------------中间旋转部分  结束---------------------------------------- -->


			<!-- ------------------------评论部分---------------------------------------- -->
			<div id="comment">
				<dl>
					<div v-for="(item,index) in hotComments">
						<img :src="item.user.avatarUrl" />
						<dd class="useid">{{item.user.nickname}}</dd>
						<dd class="usecomment">{{item.content}}</dd>
					</div>
				</dl>
			</div>










			<!-- ------------------------播放部分---------------------------------------- -->
			<div class="play">
				<audio :src="musicUrl" controls=" controls " autoplay="autoplay" id="Playing"></audio>
				<!-- 通过v-bind属性 简写：属性  把歌曲的地址给个src -->
			</div>
			<!-- ------------------------播放部分 结束---------------------------------------- -->
		</div>
	
	</body>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 引入axios -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入vue -->
	<script>
		var musicApp = new Vue({
			el: ".w",
			data: {
				musicArr: [], //把接口获取到的歌名保存下来
				searchWorld: '', //用来存放输入的歌曲名字，传递给下面的接口
				musicUrl: '', //用来存放 下方的接口的到的歌曲url地址
				musicImg: 'imgs/zydt.jpg',
				hotComments: [],
				theme1: {
					'background-color': '#3ebcca'
				}, //主题的颜色
				theme1Search: {
					'background-color': '#2a919c'
				}, //搜索框的颜色
				theme2: {
					'background-color': '#83af9b'
				},
				theme2Search: {
					'background-color': '#57997b'
				},
				theme3: {
					'background-color': '#fc9d9a'
				},
				theme3Search: {
					'background-color': '#da6865'
				},
				themein: {
					'background-color': '#ec4141'
				},
				themeinSearch: {
					'background-color': '#e13e3e'
				},
				themeShow:false,
			},
			methods: {
				search: function() {
					var that = this;
					axios.get('https://autumnfish.cn/search?keywords=' + that.searchWorld) //接口参数设置为输入的参数
						.then(function(response) {
							//console.log(response)
							that.musicArr = response.data.result.songs; //获取到歌曲名字
						})
						.catch(function(error) {
							console.log(error)
						})
				},
				geturl: function(musicid) {
					var that = this; //通过music形参拿到歌曲的id
					//console.log(musicid)
					axios.get('https://autumnfish.cn/song/url?id=' + musicid)
						.then(function(response) {
							//console.log(musicid)
							//console.log(response.data.data[0].url);
							that.musicUrl = response.data.data[0].url; //拿到的接口赋值给musicurl变量
						})
						.catch(function(error) {
							console.log(error);
						});

					axios.get('https://autumnfish.cn/song/detail?ids=' + musicid)
						.then(function(response) {
							//console.log(response.data.songs[0].al.picUrl);
							that.musicImg = response.data.songs[0].al.picUrl;
						})
						.catch(function(error) {
							console.log(error);
						});
					axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicid)
						.then(function(response) {
							console.log(response.data.hotComments)
							that.hotComments = response.data.hotComments;
						})
						.catch(function(error) {
							console.log(error)
						})
				},
				catTheme1() {
					this.themein = this.theme1;
					this.themeinSearch = this.theme1Search;
					this.themeShow=false;
				},
				catTheme2() {
					this.themein = this.theme2;
					this.themeinSearch = this.theme2Search;
							this.themeShow=false;
				},
				catTheme3() {
					this.themein = this.theme3;
					this.themeinSearch = this.theme3Search;
					this.themeShow=false;
				},
				
				othemeShow(){
					this.themeShow=true;
				}
			}
		})
	</script>
	<script>
		var oImgRotae = document.getElementById("imgRotate");//旋转的图片
		var oPlaying = document.getElementById("Playing");//点击的播放按钮
		var ojxb=document.getElementById("jxb")//机械臂的图
		oPlaying.onplay = function() {
			oImgRotae.style.animationPlayState = "running";
			ojxb.style.transform ="rotate("+ "0deg" +")";
		}
		oPlaying.onpause = function() {
			oImgRotae.style.animationPlayState = "paused";
			ojxb.style.transform ="rotate("+ "20deg" +")";
		}
		
	</script>
</html>
